<template>
    <div>
        <div class="container">
            <div class="handle-box">
                <el-input v-model="query.Content" placeholder="内容" style="width:150px"></el-input>&nbsp;&nbsp;
                <el-select v-model="query.Status" placeholder="请选择消息状态" autocomplete="off" style="width:150px">
                    <el-option label="已读" value="1" color="silver"></el-option>
                    <el-option label="未读" value="0" color="aquamarine"></el-option>
                </el-select>&nbsp;&nbsp;
                <el-button type="primary" @click="Show()">查询</el-button>
                <el-button type="danger" @click="Delete()">批删</el-button>
                <el-button type="info" @click="UptStatus()">标记为已读</el-button>
            </div>
            <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column label="发送人" width="100" prop="createdUser"></el-table-column>
                <el-table-column label="标题" width="180" prop="noticeTitle">
                    <template slot-scope="scope">
                        <el-link type="primary" @click="read(scope.row)">{{ scope.row.noticeTitle }}</el-link>
                    </template>
                </el-table-column>
                <el-table-column label="状态" width="50">
                    <template slot-scope="scope">
                        <div v-if="scope.row.messageState == 0">
                            <el-tag type="danger">未读</el-tag>
                        </div>
                        <div v-else>
                            <el-tag type="success">已读</el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="messageDate" label="创建时间" width="150">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" type="danger" icon="el-icon-delete" 
                            @click="SingleDelete(scope.row.mId)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="pagination">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="query.pageIndex" :page-sizes="[10, 20, 30, 40, 50]" :page-size="query.pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>
        <el-dialog title="添加消息" :visible.sync="dialogFormVisible" rules="addRules">
            <el-form :rules="addRules" ref="addForm" :model="addForm">
                <el-form-item label="消息分类" prop="messageType" >
                    <el-select v-model="addForm.messageType" placeholder="请选择消息分类">
                        <el-option label="系统消息" value="系统消息"></el-option>
                        <el-option label="副本消息" value="副本消息"></el-option>
                        <el-option label="私密消息" value="私密消息"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="receiver" label="接收人" :label-width="formLabelWidth">
                    <el-input v-model="addForm.receiver"> </el-input>
                </el-form-item>
                <el-form-item prop="messageContent" label="简易内容" :label-width="formLabelWidth">
                    <el-input v-model="addForm.messageContent"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="AddWebMessage('addForm')">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="修改消息" :visible.sync="UpdatedialogFormVisible">
            <el-form :model="formData" ref="formData">
                <!-- <el-form-item label="mId" :label-width="formLabelWidth">
                    <template slot-scope="scope">{{ scope.row.mId }}</template>
                </el-form-item> -->
                <el-form-item prop="messageType" label="消息分类" :rules="
                [{ required: true , message: '请选择消息类型', trigger: 'change' }
                 ]">
                    <el-select v-model="formData.messageType" placeholder="请选择消息分类" autocomplete="off">
                        <el-option label="系统消息" value="系统消息"></el-option>
                        <el-option label="副本消息" value="副本消息"></el-option>
                        <el-option label="私密消息" value="私密消息"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="messageState" label="状态" :rules=" [
                    { required: true , message: '请选择消息状态', trigger: 'change' }
                 ]"               
                >
                    <el-radio-group v-model="formData.messageState">
                        <el-radio :label="0" value="0" color="silver">未读</el-radio>
                        <el-radio :label="1" value="1" color="aquamarine">已读</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="接收人" prop="receiver" :rules="
                [
                    { required: true , message: '请输入接收人', trigger: 'change' }
                 ]
                ">
                    <el-input v-model="formData.receiver" autocomplete="off"> </el-input>
                </el-form-item>
                <el-form-item label="简易内容" prop="messageContent" :rules="
                [
                     { required: true , message: '请输入内容' , trigger: 'blur' },
                    { min: 1, max: 133, message: '长度在1到133个汉字', trigger: 'blur' }
                ]
                ">
                    <el-input v-model="formData.messageContent" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="UpdatedialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="HandleEdit('formData')">修 改</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getMessages, uptMsgStatus } from "@/api/mymessage";

export default {
    name: 'mymessage',
    data() {
        return {
            //消息查询
            query: {
                Content: undefined,
                Status: undefined,
                MessageType: undefined,
                SortedBy: undefined,
                SortType: undefined,
                pageIndex: 1,
                pageSize: 10
            },
            //消息列表
            tableData: [],
            //总行数
            total: 0,
            //获取选中消息的数据
            multipleSelection: undefined,
            //添加消息对话框
            dialogFormVisible: false,
            //修改消息对话框
            UpdatedialogFormVisible: false,
            //添加消息
            addForm: {
                messageType: '',
                receiver: undefined,
                messageContent: undefined,
            },
            //修改消息
            formData: {
                messageType: '',
                messageState: '',
                receiver: undefined,
                messageContent: undefined,
            },
            //对话框宽度
            formLabelWidth: '120px',
            addRules: {
                messageType: [
                    { required: true , message: '请选择消息类型', trigger: 'change' }
                ],
                receiver: [
                    { required: true , message: '请输入收件人名称' , trigger: 'blur' },
                    { min: 1, max: 6, message: '长度在1到6个汉字', trigger: 'blur' }
                ],
                messageContent: [
                    { required: true , message: '请输入内容' , trigger: 'blur' },
                    { min: 1, max: 133, message: '长度在1到133个汉字', trigger: 'blur' }
                ]
            },    
            // rules: {
            //     messageType: [
            //         { required: true , message: '请选择消息类型', trigger: 'change' }
            //     ],
            //     receiver: [
            //         { required: true , message: '请输入收件人名称' , trigger: 'blur' },
            //         { min: 1, max: 6, message: '长度在1到6个汉字', trigger: 'blur' }
            //     ],
            //     messageState: [
            //         { required: true , message: '请选择消息状态', trigger: 'change' }
            //     ],
            //     messageContent: [
            //         { required: true , message: '请输入内容' , trigger: 'blur' },
            //         { min: 1, max: 133, message: '长度在1到133个汉字', trigger: 'blur' }
            //     ]
            // },    
        }
    },
    methods: {
        //全选反选
        handleSelectionChange(val) {
            //获取选中的数据
            this.multipleSelection = val;

        },
        //消息的显示
        Show() {
            getMessages(this.query).then(res => {
                this.tableData = res.data.pageList;
                this.total = res.data.totalCount;
            })
        },
        //页容量
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.query.pageSize = val;
            this.Show();
        },
        //上一页下一页
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.query.pageIndex = val;
            this.Show();
        },
        //全选反选
        // handleSelectionChange(val) {
        //     this.multipleSelection = val;
        // },
        //消息批删
        Delete() {
            if (this.multipleSelection === undefined || this.multipleSelection.length === 0) {
                this.$message({
                    message: '请选择需要删除的消息',
                    type: 'warning'
                });
                return;
            }
            else {
                if (confirm('是否确认删除？')) {  
                    var ids = this.multipleSelection.map((x) => x.mId).toString();
                    deleteMessages(ids).then(res => {
                        //console.log("消息删除:", res.code);
                        if (res.code > 0) {
                            this.$message({
                                message: '消息删除成功',
                                type: 'success'
                            });
                            this.Show();
                        }
                        else {
                            this.$message({
                                message: '消息删除失败',
                                type: 'warning'
                            });
                        }
                    })
                }
            }
        },
        //消息单删
        SingleDelete(ids) {
            if (confirm('是否确认删除？')) {
                deleteMessages(ids).then((res) => {
                    //console.log('消息删除:', res.code);
                    if (res.code > 0) {
                        this.$message({
                            message: '消息删除成功',
                            type: 'success'
                        });
                        this.Show();
                    } else {
                        this.$message({
                            message: '消息删除失败',
                            type: 'warning'
                        });
                    }
                });
            }
        },
        //标记已读
        UptStatus() {
            if (this.multipleSelection === undefined || this.multipleSelection.length === 0) {
                this.$message({
                    message: '请选择需要标记已读的消息',
                    type: 'warning'
                });
                return;
            }
            else {
                var opt = this.multipleSelection.map(x => x.mId).toString();
                console.log("标记已读:", opt);
                if (confirm('是否标记已读？')) {
                    uptMessagesStatus(opt).then(res => {
                        console.log("已读:", res.code);
                        if (res.code > 0) {
                            this.$message({
                                message: '标记已读成功',
                                type: 'success'
                            });
                            this.Show();
                        }
                        else {
                            this.$message({
                                message: '标记已读失败',
                                type: 'warning'
                            });
                        }
                    })
                }
            }
        },
        read(row){
            //弹出消息框
            this.$msgbox({
                title: row.noticeTitle,
                message: row.noticeContent,
                showCancelButton: false,
                confirmButtonText: '确定',
                beforeClose: (action, instance, done) => {
                    if (action === 'confirm') {
                       //如果消息为未读
                        if(row.messageState == 0)
                        {
                            //修改状态为已读
                            let status = 1; 
                            uptMsgStatus(row.mId, status).then(res => {
                                if (res.data > 0) {
                                    row.messageState = 1;
                                }
                                else {
                                    this.$message({message: red.msg,type: 'warning'});
                                }
                            })
                        }
                        done();
                    } else {
                        done();
                    }
                }
            }).then(action => {
                // this.$message({
                //     type: 'info',
                //     message: 'action: ' + action
                // });
            });
        }
    },
    mounted() {
        //消息列表
        this.Show();
    }
}
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
}

.el-icon-arrow-down {
    font-size: 12px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #ff0000;
}

.mr10 {
    margin-right: 10px;
}

.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
